<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	#box{
		width: 1200px;
		height: 300px;
		border: #999 1px groove;
		margin: 0 auto;
	}
	.red,.blue,.green{
		height: 300px;
		width: 300px;
		margin: 0px 50px;
		display:inline-block;
	}
	.red{
		background-color: red;
	}
	.blue{
		background-color: blue;
	}
	.green{
		background-color: green;
	}
	.bor{
		background-color:crimson;
		height: 300px;
		width: 300px;
		margin: 0px 50px;
		display:inline-block;
	}
	</style>

<body>
<div id="box">
	<div class="red"></div>
	<div class="blue"></div>
	<div class="green"></div>
</div>
<script>
	var box=document.querySelector(".red");
	console.log(box.classList);
	box.classList.add("bor");//box.
	console.log(box.classList);
	box.classList.remove("bor");

	console.log(box.classList);
	console.log(box.classList.item(1));
	</script>
</body>
</html>
